<template>
  <div class="contract-editor-container">
    <!-- 工具栏 -->
    <el-card class="mb-4">
      <div class="flex justify-between items-center">
        <div class="flex gap-2">
          <el-button type="primary" @click="saveContract">
            保存合同
          </el-button>
          <el-button @click="previewContract">
            预览
          </el-button>
        </div>
        <div>
        </div>
      </div>
    </el-card>
    
    <!-- 合同编辑区域 -->
    <el-card>
      <div class="contract-content">
        <!-- 合同标题 -->
        <div class="text-center mb-8">
          <h1 class="text-2xl font-bold">服务合同</h1>
          <p class="text-left">合同编号: {{ contract.contractNumber }}</p>
        </div>
        
        <!-- 合同双方信息 -->
        <div class="mb-6">
          <h2 class="text-xl font-semibold mb-4 border-b pb-2">一、合同双方</h2>
          
          <div class="grid grid-cols-2 gap-6">
            <div>
              <p class="font-medium">需方：苏州华靖建筑科技有限公司（以下称甲方）</p>
            </div>
            
            <div>
              <p class="font-medium">供方：<span class="edit" >
                {{ contract.partyB }}
              </span>（以下称乙方）</p>
            </div>
          </div>
        </div>
        
        <!-- 服务内容 -->
        <div class="mb-6">
          <p>　　甲乙双方为明确双方权利和义务，依照《中华人民共和国民法典》及其有关法律、法规规定，   经双方协商一致，就
            <span class="edit" :contenteditable="isEdit('name')" @blur="onChange('name', $event.target)">{{ contract.name }}</span>
            工程的材料采购事宜特订立本合同。</p>
        </div>
        <!-- 服务内容 -->
        <div class="mb-6">
          <h2 class="text-xl font-semibold mb-4 border-b pb-2">第一条	合同货物名称、规格型号、数量等详细见：《供货清单》</h2>
          <p>　　合同金额（含增值税）：
            <span class="edit" >{{ contract.price }}</span>
            ，上述金额包括但不限于运输费、保险费、检验检测费、及现场卸货等一切费用。若合同履行过程中遇国家增值税税率调整，增值税税率以纳税义务发生时的适用税率为准，增值税金额根据适用税率进行实际调整。</p>
          <p>　　1.在乙方交付货物前，甲方有权以书面要求乙方对合同货物的设计、加工工艺、货物数量  进行更改。如变更设计、加工工艺增加乙方成本的，由双方另行协商解决。</p>
          <p>　　2.“供货清单”中数量为暂估数量，最终甲乙双方按照下列第  B  种方式计算送货数量及最终结算金额：</p>
          <p>　　A 按照甲方验收合格且实际接收的数量计算送货数量，甲乙双方根据前述数量及双方确认的单价计算出供货总金额；</p>
          <p>　　B 按照所供材料附和于建筑物的合格数量，甲乙双方根据前述数量及双方确认的单价计算出供货总金额；</p>
          <p>　　C 按照所供材料附和于建筑物的⬜可见光面积⬜可视投影面积计算送货数量(在选定的面积计算方式前的方框内划√)，甲乙双方根据前述数量及双方确认的单价计算出供货总金额；</p>
          <p>　　D 最终结算金额：甲方与建设方/业主方/总包方完成本合同项下所述工程的结算审价后，乙方同意按照建设方/业主方/总包方确定的由乙方供货部分的材料款总金额的基础上再行下  浮      \    %作为甲乙双方最终结算金额。乙方应出示甲方项目部出具《收料单》，并按本合同约定的结算方式与甲方进行核对结算， 且《收料单》必须由甲方指定收货人签字方有效（甲方指定收货人的签字仅是对货物数量的确认， 并不表明对其价格及质量的确认），其它任何个人或者盖章均无效，甲方有权不予结算。待乙方供应完成且项目完工后，乙方按照甲方公司的要求提供相应结算资料并配合甲方完成结算工作。甲方总公司审计中心有权对材料（工程）决算情况进行复审；若复审，双方同意以甲方审计中心的复审结果作为双方材料结算价格。</p>
          <p>　　3.本合同履行过程中，若乙方增加供货金额，甲乙双方须签订书面的增补协议并加盖甲方公章，若乙方不予签订或未加盖甲方公章，则超过部分甲方有权不予结算。</p>
        </div>
        <!-- 服务内容 -->
        <div class="mb-6">
          <h2 class="text-xl font-semibold mb-4 border-b pb-2">第二条	交货期限</h2>
          <p>　　1.双方选择以下交货期限供货：<span class="edit" :contenteditable="isEdit('delivery_deadline')" @blur="onChange('delivery_deadline', $event.target)">{{ contract.delivery_deadline }}</span></p>
          <p>　　(A)第一次供货在
            <span class="edit" :contenteditable="isEdit('one_year')" @blur="onChange('one_year', $event.target)">{{ contract.one_year }}</span>
            年
            <span class="edit" :contenteditable="isEdit('one_month')" @blur="onChange('one_month', $event.target)">{{ contract.one_month }}</span>
            月
            <span class="edit" :contenteditable="isEdit('one_day')" @blur="onChange('one_day', $event.target)">{{ contract.one_day }}</span>
            日前，供货数量：
            <span class="edit" :contenteditable="isEdit('one_ratio')" @blur="onChange('one_ratio', $event.target)">{{ contract.one_ratio }}</span>
            %，按合同约定将货物运至甲方指定地点；(配套安装产品，需要提前安排工人协调安装工作）。</p>
          <p>　　(B)第二次供货在
            <span class="edit" :contenteditable="isEdit('two_year')" @blur="onChange('two_year', $event.target)">{{ contract.two_year }}</span>
            年
            <span class="edit" :contenteditable="isEdit('two_month')" @blur="onChange('two_month', $event.target)">{{ contract.two_month }}</span>
            月
            <span class="edit" :contenteditable="isEdit('two_day')" @blur="onChange('two_day', $event.target)">{{ contract.two_day }}</span>
            日前，供货数量：
            <span class="edit" :contenteditable="isEdit('two_ratio')" @blur="onChange('two_ratio', $event.target)">{{ contract.two_ratio }}</span>
            %，按合同约定将货物运至甲方指定地点；(配套安装产品，需要提前安排工人协调安装工作）。</p>
          <p>　　(C)第三次供货在
            <span class="edit" :contenteditable="isEdit('three_year')" @blur="onChange('three_year', $event.target)">{{ contract.three_year }}</span>
            年
            <span class="edit" :contenteditable="isEdit('three_month')" @blur="onChange('three_month', $event.target)">{{ contract.three_month }}</span>
            月
            <span class="edit" :contenteditable="isEdit('three_day')" @blur="onChange('three_day', $event.target)">{{ contract.three_day }}</span>
            日前，供货数量：
            <span class="edit" :contenteditable="isEdit('three_ratio')" @blur="onChange('three_ratio', $event.target)">{{ contract.pathree_ratiortyB }}</span>
            %，按合同约定将货物运至甲方指定地点；(配套安装产品，需要提前安排工人协调安装工作）。</p>
          <p>　　(D)其他交货期限：<span class="edit" :contenteditable="isEdit('quality_other')" @blur="onChange('quality_other', $event.target)">{{ contract.quality_other }}</span>。</p>
          <p>　　2.乙方的供货时间为乙方提供符合合同约定质量的全部产品时的时间。如分批次供货的，  供货时间为每次提供符合合同约定质量全部产品时的时间。</p>
          <p>　　3.延迟交货情形：不可抗力、因甲方对设计、加工工艺更改和供货数量增加后，经甲方书面同意可以顺延期限（如发生供货期需延长，乙方应在甲方指令发出后四十八小时内申请延期， 逾期未提出，视为无延期），非以上原因乙方不得以任何理由延迟交货。但上述情况经甲方审核确认同意也仅顺延供货期限，甲方不承担乙方其他任何的损失。</p>
        </div>
        <!-- 服务内容 -->
        <div class="mb-6">
          <h2 class="text-xl font-semibold mb-4 border-b pb-2">第三条	产品的质量标准和保证</h2>
          <p>　　1.乙方应严格执行与合同货物有关的下列质量标准及技术标准：</p>
          <p>　　1.1.甲方向乙方提出的技术标准或质量要求：检测报告原件及合格证原件；有关的材料安全、环保要求根据国家或行业相关标准： 应符合建筑功能要求，材料标准要求；</p>
          <p>　　1.2.与甲乙双方签字确认的样品一致；</p>
          <p>　　1.3.其他要求：<span class="edit" :contenteditable="isEdit('requirement')" @blur="onChange('requirement', $event.target)">{{ contract.requirement }}</span></p>
          <p>　　2.未经甲方事先书面同意,乙方不得变更经甲方评审确定的合同货物的设计、制造设备、   材料、工艺标准、生产产地。乙方保证合同货物及其相关配件产品没有原料和制造工艺等缺陷，   符合甲方质量要求或标准，并按甲方要求及时提供相关服务。</p>
          <p>　　3.如在货物装配和使用过程中，因货物质量问题导致了甲方及其他第三方的财产或人身损失及相关后果由乙方承担。</p>
          <p>　　4.乙方承诺甲方及其发包人使用按本合同购买的合同货物,不会导致侵犯任何第三方的  知识产权及其他权利,否则引起的索赔及其他责任均由乙方全部承担。</p>
        </div>
        <!-- 服务内容 -->
        <div class="mb-6">
          <h2 class="text-xl font-semibold mb-4 border-b pb-2">第四条 货物质保期限</h2>
          <p>　　1.货物质保期为自甲方对合同货物验收合格之日起
            <span class="edit" :contenteditable="isEdit('warranty')" @blur="onChange('warranty', $event.target)">{{ contract.warranty }}</span>
            个月。如国家规定或乙方承诺该产品本身的质保期限长于此约定期限的，或者甲方根据发包人要求延长上述质保期限的，则货   物质保期限予以相应延长。</p>
          <p>　　2.保修期及保修期起算日期按甲方与业主（或总包人）签定的合同约定执行，在保修期内  出现属乙方项目的质量问题，乙方必须自接到维修通知后
            <span class="edit" :contenteditable="isEdit('warranty_time')" @blur="onChange('warranty_time', $event.target)">{{ contract.warranty_time }}</span>
            小时内派人提供免费维修。</p>
          <p>　　3.若乙方经通知后不在限期内进行维修，甲方有权自行维修或安排其他厂商或人员进行维  修, 相应的维修款在应付款项中扣除，甲方并有权要求乙方承担与维修款等额的违约金。</p>
        </div>
        <!-- 服务内容 -->
        <div class="mb-6">
          <h2 class="text-xl font-semibold mb-4 border-b pb-2">第五条 交货地点</h2>
          <p>　　交货地点：<span class="edit" :contenteditable="isEdit('address')" @blur="onChange('address', $event.target)">{{ contract.address }}</span>，合同履行过程中，甲方根据需要有权在任何时候向乙方发出指令要求变更交货地点。</p>
        </div>
        <!-- 服务内容 -->
        <div class="mb-6">
          <h2 class="text-xl font-semibold mb-4 border-b pb-2">第六条 交货方式</h2>
          <p>　　1.由乙方送货到甲方或其指定地点，相关费用由乙方承担。</p>
          <p>　　2.甲方指定货物签收人为<span class="edit" :contenteditable="isEdit('consignee')" @blur="onChange('consignee', $event.target)">{{ contract.consignee }}</span>，须二人同时签字有效。乙方清楚， 甲方项目部及项目部任何人员以任何名义向乙方出具的欠据、收据、承诺、结算单等其他任何文书，皆须经甲方内审部以及分管领导审核签字确认后，并在 7 日内到甲方加盖公章方为有效。</p>
          <p>　　3.乙方代表
            <span class="edit" :contenteditable="isEdit('b')" @blur="onChange('b', $event.target)">{{ contract.b }}</span>
            ，联系电话
            <span class="edit" :contenteditable="isEdit('b_mobile')" @blur="onChange('b_mobile', $event.target)">{{ contract.b_mobile }}</span>
            ， 微信号 
            <span class="edit" :contenteditable="isEdit('b_wx')" @blur="onChange('b_wx', $event.target)">{{ contract.b_wx }}</span>
            ，电子邮箱
            <span class="edit" :contenteditable="isEdit('b_email')" @blur="onChange('b_email', $event.target)">{{ contract.b_email }}</span>
            ，联系地址
            <span class="edit" :contenteditable="isEdit('b_address')" @blur="onChange('b_address', $event.target)">{{ contract.b_address }}</span>
            ，负责合同的履行，生产进度的跟进、维修，并负责合同的结算（过程签证确认、过程结算、最终结算等）及款项接收   等与本合同相关的一切事宜。</p>
        </div>
        <div class="mb-6">
          <h2 class="text-xl font-semibold mb-4 border-b pb-2">第七条	包装</h2>
          <p>　　1.乙方必须严格按照甲方所指定的包装标准执行,甲方没有明确包装标准的,则按国家有关标准执行，如无国家标准的，则先后采用部颁标准、行业标准、甲方所在地的地方性标准、同   类产品的通用标准执行。</p>
          <p>　　2.甲方有权拒绝接收乙方交付的包装已损坏的产品。</p>
        </div>
        <div class="mb-6">
          <h2 class="text-xl font-semibold mb-4 border-b pb-2">第八条	质量检验</h2>
          <p>　　1.在到货后当日，由甲方对货物数量进行清点，签署《入库单》。该《入库单》仅作为甲方   对乙方送货数量的清点说明，不得作为乙方对货物质量的验收证明。</p>
          <p>　　2.货物交付验收时乙方必须提供完整的产品资料：包括货物清单、产品出厂检验报告、材料质量检验报告、环保检验报告、质保书、使用说明书、产品合格证等应具备的所有资料。乙方   在交货前须向甲方提供完整的上述资料，如乙方未能按时提供上述资料视为未完全履行交货义   务。</p>
          <p>　　3.对于货物的质量争议，以工程项目发包人检验结果或项目所在地质量检验部门出具的检   验报告为准。乙方产品验收合格并不免除乙方因产品存在内在质量问题、不符合规范要求或有其   它质量瑕疵应承担全部责任（包括并不限于在质保期满后负责更换和维修）。</p>
          <p>　　4.甲方在接收和装配合同货物过程中或质保期内发现货物有缺陷，乙方应在接到甲方通知后3 日内更换有缺陷的合同货物或经甲方事先同意后进行返工，如乙方未能按约更换货物或返工， 甲方可向第三方订货或交由第三方维修，由此产生的费用由乙方承担，且甲方有权要求乙方承担与维修款等额的违约金。</p>
          <p>　　5.乙方擅自更换材料品牌或使用假冒品牌材料、供应劣质货物或降低质量等级的，甲方有权要求乙方支付该材料采购总额十倍的违约金，违约金不足以弥补甲方损失的，乙方还应予以赔偿。若购买货物须乙方提供安装调试的，乙方负责安装及安装后的调试工作，并负责安装调试过程中所有损坏零部件的更换。整个安装调试工作在交付货物后
            <span class="edit" :contenteditable="isEdit('install_day')" @blur="onChange('install_day', $event.target)">{{ contract.install_day }}</span>
            日内完成。设备调试运行后，甲方和乙方共同对货物进行整体验收。整体验收内容包括硬件验收和软件联机验收，以确   保货物符合本合同规定的要求及标准，并能够正常运行。货物经整体验收合格后，由双方共同签   署设备验收合格单。</p>
        </div>
        <div class="mb-6">
          <h2 class="text-xl font-semibold mb-4 border-b pb-2">第九条	付款条件</h2>
          <p>　　1.乙方的每批货物必须开具相应的正式发票并提供所交货物的清单。</p>
          <p>　　2.乙方收款前须提供真实、有效、合法的税率为<span class="edit" :contenteditable="isEdit('tax_rate')" @blur="onChange('tax_rate', $event.target)">{{ contract.tax_rate }}</span>的增值税专用发票，若未提供足额发票或提供不符合前述要求的发票（如虚开发票、假发票等），甲方有权暂停支付全部应付款项，付款期限相应顺延，直至乙方重新提供合格、足额发票；并要求乙方重新提   供合格发票；如乙方未按上述约定的发票种类、税率重新开具发票等补救措施的，甲方有权要求   乙方支付发票金额 20%的违约金，违约金不足以弥补甲方损失的，乙方还应予以赔偿。</p>
          <p>　　3.因乙方发票问题给甲方造成的一切后果（包括但不限于税务/工商处罚）均由乙方承担。</p>
          <p>　　4.乙方承诺：若甲方在项目决算中发现，本合同约定的价格明显高于市场同类产品或服务价格的，乙方应退还高于市场价格部分的差价。</p>
          <p>　　5.本合同的履行主体、收款主体、发票主体、结算主体等与本合同履行有关的必须与乙方名称一致。</p>
          <p>　　6.乙方未按本合同约定供应货物或提供发票的，每延误一天，甲方付款相应顺延一天。</p>
          <p>　　7.付款方式为：转账、汇票、承兑等形式。</p>
        </div>
        <div class="mb-6">
          <h2 class="text-xl font-semibold mb-4 border-b pb-2">第十条	付款方式</h2>
          <p>　　1.本合同签订生效后，由甲方向乙方支付合同总价款的约
            <span class="edit" :contenteditable="isEdit('deposit_ratio')" @blur="onChange('deposit_ratio', $event.target)">{{ contract.deposit_ratio }}</span>
            % 作为预付款(定金）；定金（预付款）金额：大写人民币
            <span class="edit" :contenteditable="isEdit('deposit_china')" @blur="onChange('deposit_china', $event.target)">{{ contract.deposit_china }}</span>
            （¥ 
            <span class="edit" :contenteditable="isEdit('deposit')" @blur="onChange('deposit', $event.target)">{{ contract.deposit }}</span>
            元）。</p>
          <p>　　2.乙方按甲方要求送交每批货物，经甲方对货物检验合格后，付至该批货物价款的<span class="edit" :contenteditable="isEdit('pay_two')" @blur="onChange('pay_two', $event.target)">{{ contract.pay_two }}</span>%（预付款方式扣除：☑同比例扣除/□一次性扣除）。</p>
          <p>　　3.乙方全部交付货物并经甲方对货物检验合格后付至总价款的<span class="edit" :contenteditable="isEdit('pay_three')" @blur="onChange('pay_three', $event.target)">{{ contract.pay_three }}</span>%。</p>
          <p>　　4.甲方承建的整体工程竣工验收合格后，经甲方代表确认并经甲方财务部审核后付至送货金额 的<span class="edit" :contenteditable="isEdit('pay_end')" @blur="onChange('pay_end', $event.target)">{{ contract.pay_end }}</span>%；</p>
          <p>　　5.项目总体验收合格，乙方将供货清单提交甲方核对审核完成。 除留结算金额的
            <span class="edit" :contenteditable="isEdit('settlement_ratio')" @blur="onChange('settlement_ratio', $event.target)">{{ contract.settlement_ratio }}</span>
            % 作为质保金待质保期满后
            <span class="edit" :contenteditable="isEdit('settlement_day')" @blur="onChange('settlement_day', $event.target)">{{ contract.settlement_day }}</span>
            日内支付外，其余款项在甲方与建设方/业主最终完成工程造价审核且工程建设方支付完除质量保证金之外的全部工程款后 7 日内支付。</p>
        </div>
        <div class="mb-6">
          <h2 class="text-xl font-semibold mb-4 border-b pb-2">第十一条	结算</h2>
          <p>　　1.本合同项下货物交付完毕且验收合格后，乙方需于 10 日内按甲方决算部门的要求向甲方递交完整的结算资料（若有电子版，需提供电子版），并由甲方予以核定价款。甲方在与发包人进行工程结算审价（审计）时，由乙方配合甲方与发包人进行审价（审计）。如果乙方未能在   约定的期限内提交完整资料的或者自收到甲方通知之日 5 日内未派人员致甲方对接结算事宜，甲方有权依据现有资料进行结算，对于甲方出具的结算结果乙方无条件均予以认可。</p>
          <p>　　2.完整的结算资料包括但不限于以下：</p>
          <p>　　2.1材料对账单、材料送货单、退货单；</p>
          <p>　　2.2.其他资料。</p>
          <p>　　3.甲方总公司审计中心有权对材料结算情况进行复审；若复审，双方同意以甲方审计中  心的复审结果作为双方材料结算价格。</p>
          <p>　　4.乙方应配合甲方向发包人报送各类报表、检测报告、结算资料,上述资料应在甲方提出  要求之日起 15 日内提供；如因乙方拒不配合工作、延迟报送或未尽到配合义务产生的损失、违约责任由乙方承担。</p>
          <p>　　5.本项目的甲方项目印章不得用于办理对外结算事宜，本合同的结算须经甲方成本部经  理签字并加盖甲方公章方为有效。</p>
        </div>
        <div class="mb-6">
          <h2 class="text-xl font-semibold mb-4 border-b pb-2">第十二条 违约责任</h2>
          <p>　　1.由于乙方原因造成逾期供货，每逾期一天，按合同金额的 1% 承担违约责任，违约金不足以赔偿损失的甲方仍有权要求乙方补足。</p>
          <p>　　2.如因乙方逾期供货、供货不足、供货不符合发包人或国家规范要求或甲方确认的样品  要求、或供货质量有缺陷等造成甲方不得不向第三方订货或因此遭受到发包人的索赔等，乙方应   赔偿甲方由此而造成的包括但不限于货物价格增加、运输、索赔等所有损失费用。</p>
          <p>　　3.乙方提供的各种规格的货物中有任一种交付不合格的,视同为整个标的物的交付不合格，乙方应予以更换，因此导致逾期交货的，按照本合同约定支付逾期交货违约金。</p>
          <p>　　4.如乙方有以下违约行为，甲方有权解除合同、不予支付任何款项，乙方则向甲方偿付合同总价款20%的违约金，违约金不足以赔偿损失的，甲方有权要求乙方补足，并返还甲方已支付的合同款项。并赔偿甲方相关损失，包括但不限于对第三方的赔偿、律师费、诉讼费、保全费、鉴定费、公告费等:</p>
          <p>　　4.1.故单方面中途停止供应合同货物或未经甲方书面同意将其权利义务转让给第三方</p>
          <p>　　4.2.因乙方自身原因导致甲方施工项目延期交付的，或逾期交货超过 3 天；</p>
          <p>　　4.3.供应有质量缺陷的合同货物达到二次以上的；</p>
          <p>　　4.4.销售或侵犯第三方权利（如：知识产权、商标权等等）;</p>
          <p>　　4.5.交付的货物被证明不符合国家强制标准的；</p>
          <p>　　4.6.其他乙方违反本合同约定，导致甲方合同目的无法实现的情况。</p>
          <p>　　5..乙方保证乙方或乙方有关联的第三方不得有影响甲方声誉或任何损害甲方利益的宣  传，否则乙方应向甲方支付合同价款<span class="edit" :contenteditable="isEdit('liquidated_damages')" @blur="onChange('liquidated_damages', $event.target)">{{ contract.liquidated_damages }}</span>%的违约金，违约金不足以赔偿损失的甲方仍有权要求乙方补足。</p>
          <p>　　6.若甲方自身原因导致延期付款，乙方给予宽延期二个月，若宽延期届满经乙方催告后仍未付款，则甲方应自催告后每延期一天按未付款金额的银行同期活期存款利率支付违约金。</p>
        </div>
        <div class="mb-6">
          <h2 class="text-xl font-semibold mb-4 border-b pb-2">第十三条	履约保证金</h2>
          <p>　　<span class="edit" :contenteditable="isEdit('margin_deposit')" @blur="onChange('margin_deposit', $event.target)">{{ contract.margin_deposit }}</span></p>
          <p>　　乙方为完成合同义务自愿交纳履约保证金或履约保函，应当自本合同签署之日起三日内向甲方提交合同暂定金额的
            <span class="edit" :contenteditable="isEdit('margin_deposit_ratio')" @blur="onChange('margin_deposit_ratio', $event.target)">{{ contract.margin_deposit_ratio }}</span>
            %履约保证金/见索即付银行履约保函。履约保证金待本合同全部履行完毕， 乙方无延误交付货物、质量瑕疵以及其他违反合同约定的情形时，甲方一次性无息返还。若乙方未按本合同约定交纳履约保证金或保函的，甲方有权在支付给乙方的任何款项中扣除前述相同金额的款项作为乙方应交纳的履约保证金或保函。</p>
        </div>
        <div class="mb-6">
          <h2 class="text-xl font-semibold mb-4 border-b pb-2">第十四条	合同争议与效力</h2>
          <p>　　1.由于本合同履行过程中而发生的或与之有关的任何争议或请求，提交甲方所在地有管辖权的人民法院诉讼解决。</p>
          <p>　　2.本合同附表、附件均作为本合同不可分割的一部分，与本合同具有同等法律效力；附表、附件与本合同内容不一致的，则以本合同的内容为准。</p>
          <p>　　3.本合同未约定事宜按照甲方的招标文件及招标过程资料执行。</p>
          <p>　　4.优先解释顺序：双方在合同履约过程中签署的本合同、补充协议、招标文件、国家及  行业规范。</p>
          <p>　　5.本合同在乙方有权代表签字且盖章的同时，还必须由甲方盖章且综合管理部负责人
            <span class="edit" :contenteditable="isEdit('a')" @blur="onChange('a', $event.target)">{{ contract.a }}</span>
            签字后方才生效，此为合同生效必备要件，若上述甲方项目部负责人未签字的，合同不生效。合同的每一页均需合同约定的有权签字人员签字确认并加盖骑缝章。乙方明确知道，项目部及项目部章无权变更本合同任何条款，若甲乙双方需变更本协议合同条款，需另行签订补充协议并加盖甲方公章且经甲方项目部负责人签字方为有效，否则无效，造成的一切损失由乙方承担。本协议一式 肆份（乙方一份， 甲方的成本管理部、项目部、财务部各一份），均具有同等法律效力。</p>
          <p>　　6.本工程所称的发包人是指具有工程发包主体资格和支付工程价款能力的当事人以及取得该当事人资格的合法继承人的业主/土建总包/其他管理方。</p>
          <p>　　7.本合同所称的项目总体验收合格是指甲方与发包人之间的施工项目经发包人验收合格。</p>
          <p>　　8.签订本合同前乙方已完全知悉甲方与发包人之间签订的施工合同约定的违约责任及其违约可能给甲方造成的损失。</p>
          <p>　　9.甲方通知乙方的方式包括不限于邮寄、电子邮件、微信、电话、短信等方式。若乙方变更授权代表或联系地址，应在变更后 24 小时内将变更后的授权代表及联系方式以书面形式通知甲方，否则甲方按照本合同确定的联系方式向乙方送达即视为有效送达乙方，由此造成的一切   责任由乙方承担。乙方确人的联系地址适用范围包括但不限于双方非诉时各类通知、协议等文件   以及就合同发生纠纷时相关文件和法律文书的送达，同时包括在争议进入仲裁、民事诉讼程序后   的一审、二审、再审和执行程序。</p>
        </div>
        <div class="mb-6">
          <h2 class="text-xl font-semibold mb-4 border-b pb-2">第十五条 其他约定：</h2>
          <p>　　<span class="edit" :contenteditable="isEdit('other')" @blur="onChange('other', $event.target)">{{ contract.other }}</span>本条作为合同未尽事宜的补充，若出现与本合同第一条至第十四条约定不一致的，以本合同第一条至第十四条约定为准。</p>
        </div>
        <div class="mb-6">
          <h2 class="text-xl font-semibold mb-4 border-b pb-2">第十六条	投诉、举报</h2>
          <p>　　部门：综合管理部   电话：0512-83810811   邮箱：645501059@qq.com</p>
          <p>　　附件：采购清单（甲、乙双方签字且盖章确认）、材料参数（品牌/规格/型号）、特殊材料小样彩   图（若有请提供，盖章或签字确认）、报关单（若是进口材料）、告知函、授权委托书；</p>
        </div>
        <el-row>
              <el-col :span="12">
                  <p>　　甲方（盖章）：</p>
                  <p>　　甲方代表：</p>
                  <p>　　授权代表人：</p>
                  <p>　　签订日期:</p>
              </el-col>
              <el-col :span="12">
                  <p>　　乙方（盖章）：</p>
                  <p>　　乙方代表：</p>
                  <p>　　授权代表人：</p>
                  <p>　　签订日期:</p>
              </el-col>
          </el-row>
          <p>　　附件一：采购清单及价格； </p>
          <p>　　附件二：供应商营业执照及经办人身份证复印件加盖公章</p>
        <!-- ------------------------------------------------------------ -->
      </div>
    </el-card>
    
    <!-- 预览弹窗 -->
    <el-dialog v-model="previewVisible" title="合同预览" width="80%">
      <div class="contract-preview" >
        <!-- 预览内容与编辑区域相同，但所有内容都不可编辑 -->
        <div ref="pdfContent" v-html="previewHtml" class="contract-content" />
      </div>
      
      <template #footer>
        <el-button v-if="template.is_approved" type="primary" @click="exportToPdf">导出为PDF</el-button>
        <el-button @click="previewVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { ElMessage, ElCard, ElButton, ElDialog } from 'element-plus';
import html2pdf from 'html2pdf.js';
import http from '../../../../util/request';
import func from '../../../../util/function';
const pdfContent = ref(null);
const id:any = ref(0)

// 初始化合同数据
const contract = ref<any>({
  contractNumber: '',
  partyA: '苏州华靖建筑科技有限公司',
  partyB: '江西金凯瑞陶瓷有限公司',
  name:'苏州华靖建筑科技有限公司苏州地区工地现场',
  price:'大写人民币    壹拾伍万元整  （¥ 150000.00 元）',
  delivery_deadline:'A□B□C□C□D□',
  one_year: '2021',
  one_month: '05',
  one_day: '15',
  one_ratio: '30',
  two_year: '2021',
  two_month: '11',
  two_day: '25',
  two_ratio: '30',
  three_year: '2022',
  three_month: '12',
  three_day: '31',
  three_ratio: '40',
  quality_other: '/',
  requirement:'/',
  warranty: '24',
  warranty_time: '48',
  address: '江苏省苏州工业园区 ****工地',
  consignee: '项目经理 、  卡卡',
  Deliveryb: '江西金凯瑞陶瓷有限公司',
  b: '谌清山',
  b_mobile:'13576195458',
  b_wx:'/',
  b_email:'/',
  b_address:'江西省高安新街陶瓷工业园',
  install_day:'7',
  tax_rate:'（ ☑ 13% □9% □3% ）',
  deposit_ratio:'13 % ',
  deposit_china:'伍万元整',
  deposit:'50000:00',
  pay_two:'80',
  pay_three:'90',
  pay_end:'100',
  settlement_ratio:'/',
  settlement_day:'7',
  liquidated_damages:'30%',
  margin_deposit:'□交纳 ☑不交纳 履约保证金或履约保函。',
  margin_deposit_ratio:'/',
  a:'卡卡',
  other:'/'
});

// 可编辑区域设置
const dialogVisible = ref(false);
const editableSections = ref<string[]>([
  'contractNumber',
  'partyA',
  'partyB',
  'name',
  'price',
  'delivery_deadline',
  'one_year',
  'one_month',
  'one_day',
  'one_ratio',
  'two_year',
  'two_month',
  'two_day',
  'two_ratio',
  'three_year',
  'three_month',
  'three_day',
  'three_ratio',
  'quality_other',
  'requirement',
  'warranty',
  'warranty_time',
  'address',
  'consignee',
  'Deliveryb',
  'b',
  'b_mobile',
  'b_wx',
  'b_email',
  'b_address',
  'install_day',
  'tax_rate',
  'deposit_ratio',
  'deposit_china',
  'deposit',
  'pay_two',
  'pay_three',
  'pay_end',
  'settlement_ratio',
  'settlement_day',
  'liquidated_damages',
  'margin_deposit',
  'margin_deposit_ratio',
  'a',
  'other',
]);

// 状态管理
const template = ref({is_approved:false});
const isSaved = ref(false);
const previewVisible = ref(false);
const previewHtml = ref('');

// 判断区域是否可编辑
const isEdit = (section: string) => {
  return editableSections.value.includes(section);
};

// 处理内容变化
const onChange = (section:any, value: any) => {
  contract.value[section] = value.innerText;
  isSaved.value = false;
};

const getData = () => {
    http.post('/material/template',{material_contract_id:id.value,type:'template'}).then((response:any)=>{
      if(response.data.data){
        contract.value = response.data.data.content
        template.value = response.data.data
      }
      dialogVisible.value = true;
    })
}

const getContract = () => {
    http.get('/contract/' + id.value).then((response:any)=>{
      if(response.data.data){
        contract.value.partyB = response.data.data.b_name
        let priceChinese = func.numberToChinese(response.data.data.price)
        contract.value.price = '大写人民币' + priceChinese + '（¥ ' + response.data.data.price + ' 元）'
      }
      getData()
    })
}

// 保存合同
const saveContract = () => {
  // 模拟保存操作
  let request:any = null
  let content:string = JSON.stringify(contract.value)
    if(id.value){
        request = http.patch('/material/template',{material_contract_id:id.value,type:'template',content:content})
    }else{
        request = http.put('/material/template',{material_contract_id:id.value,type:'template',content:content})
    }
    request.then((response:any)=>{
      if(response.data.code == 200){
        isSaved.value = true;
        ElMessage.success('合同已保存');
        emit('onMaterialTemplate');
      }
    })
};

const emit = defineEmits(['onMaterialTemplate'])

// 预览合同
const previewContract = () => {
  
  // 生成预览HTML，将所有可编辑区域变为不可编辑
  const tempDiv = document.createElement('div');
  const contractContent = document.querySelector('.contract-content')?.cloneNode(true);
  if (contractContent) {
    tempDiv.appendChild(contractContent);
    const editableElements = tempDiv.querySelectorAll('.edit');
    editableElements.forEach(el => {
      el.removeAttribute('class');
    });
    previewHtml.value = tempDiv.innerHTML;
    previewVisible.value = true;
  }
};


const props = defineProps<{
    id:any,
}>()

watch(props,()=>{
    id.value = props.id
    getContract();
},{ immediate: true })

// 导出PDF的方法
const exportToPdf = () => {
  if (!pdfContent.value) return;

  // 配置选项
  const opt = {
    margin: 10,
    filename: '导出的文档.pdf',
    image: { type: 'jpeg', quality: 0.98 },
    html2canvas: { scale: 2, useCORS: true },
    jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait',letterRendering: true }
  };
  // 生成PDF
  html2pdf().from(pdfContent.value).set(opt).save();
};
</script>

<style scoped>
.contract-editor-container {
  padding: 20px;
  height: calc(100vh - 25vh);overflow-y: scroll;
}

.contract-content {
  line-height: 1.8;
  font-size: 16px;
  color: #333 !important;
}

.edit {
  border-bottom: 1px dashed #edd32c;
  padding: 0 4px;
  min-width: 60px;
  display: inline-block;
}

.edit[contenteditable="true"] {
  background-color: #edd32c;
  cursor: text;
}

.edit[contenteditable="true"]:focus {
  outline: 1px solid #edd32c;
  border-radius: 2px;
}

.contract-preview {
  max-height: 70vh;
  overflow-y: auto;
  padding: 20px;
}
</style>
